<template>
  <div class="order">
    <Card :show-border="true">
      <div class="title border" style="position: relative">
        我的订单<span v-if="paginator">({{ paginator.count }})</span>
        <el-link type="primary" style="position: absolute;right: 10px" @click="bindVisible=true">绑定设备ID</el-link>
      </div>

      <el-table v-loading="loading"
                :data="tableData"
                border
                style="width: 100%">
        <el-table-column
          fixed
          prop="orderNo"
          label="订单号"
          width="200">
        </el-table-column>
        <el-table-column
          prop="packageName"
          label="套餐"
          width="120">
        </el-table-column>
        <el-table-column
          prop="amount"
          label="金额"
          width="120">
        </el-table-column>
        <el-table-column
          prop="code"
          label="激活码"
          width="120">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间">
        </el-table-column>
        <el-table-column
          prop="status"
          label="激活次数"
          width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.activated }}/{{ scope.row.quantity }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="record"
          label="激活记录"
          width="120">

          <template slot-scope="scope">
            <el-button type="text" @click="showRecord(scope.row.activeId)">查看记录</el-button>
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button :disabled="scope.row.activated>=scope.row.quantity" @click="offlineActive(scope.row.code)"
                       type="text" size="small">离线激活
            </el-button>
          </template>
        </el-table-column>

        <el-table-column
          label="发票"
          width="100">
          <template slot-scope="scope">
            <el-button :disabled="!scope.row.canInvoice" @click="invoice(scope.row.id)"
                       type="text" size="small">
              <span v-if="scope.row.invoiceStatus===-1">申请发票</span>
              <span v-if="scope.row.invoiceStatus===0">等待审核</span>
              <span v-if="scope.row.invoiceStatus===1">已开票</span>
              <span v-if="scope.row.invoiceStatus===2">审核不通过</span>
            </el-button>
          </template>
        </el-table-column>

      </el-table>

      <pagination v-if="paginator" :dynamic="true" :current="paginator.current" :pages="paginator.pages"
                  @change="change"/>


      <!--      激活记录-->
      <active-record :visible="recordVisible" :active-id="activeId" @close="recordVisible = false"/>

      <!--      离线激活-->
      <offline-active @refresh="getOrders()" :visible="visible" @close="visible = false"
                      :code="offlineCode"/>

      <device-bind :visible="bindVisible" @close="bindVisible = false" @refresh="getOrders()"/>

      <invoice style="min-width:500px;" v-if="invoiceVisible" :visible="invoiceVisible" @close="invoiceVisible =false" :order-id="orderId" @refresh="getOrders()"/>
    </Card>
  </div>
</template>

<script>
import api from "@/utils/api";
import ActiveRecord from "@/components/order/ActiveRecord";
import OfflineActive from "@/components/order/OfflineActive";
import DeviceBind from "@/components/order/DeviceBind";
import Invoice from "@/components/order/Invoice";

export default {
  name: "order",
  components: {Invoice, DeviceBind, OfflineActive, ActiveRecord},
  layout: 'base',
  middleware: 'auth',
  head() {
    return {
      title: '我的订单'
    }
  }, data() {
    return {
      userId: this.$store.state.user.id,
      page: 1,
      tableData: [],
      paginator: null,
      loading: false,
      visible: false,
      offlineCode: null,
      recordVisible: false,
      activeId: null,
      bindVisible: false,
      invoiceVisible: false,
      orderId: null
    }
  },
  methods: {
    getOrders() {
      let self = this;
      self.loading = true;
      api.getOrders(this.userId, this.page).then(res => {
        this.tableData = res.orders;
        this.paginator = res.paginator;
      }).finally(() => self.loading = false);
    },
    change(page) {
      this.page = page;
      this.getOrders();
    },
    offlineActive(code) {
      this.offlineCode = code;
      this.visible = true;
    },
    showRecord(id) {
      console.log(id)
      this.activeId = id;
      this.recordVisible = true;
    },
    invoice(id) {
      this.orderId = id;
      this.invoiceVisible = true;
    }
  },
  created() {
    this.getOrders();
  }
}
</script>

<style scoped>

</style>
